<!--  -->
<template>
  <div class="container">
    <!-- 遮罩层 -->
    <div class="mask" v-show="maskShow">
      <div class="file-box">
        <div class="box-title">提现处理</div>
        <div class="form">
          <el-form
            :model="ruleForm"
            :rules="rules"
            ref="ruleForm"
            label-width="100px"
            class="demo-ruleForm"
          >
            <el-form-item label="状态" prop="state">
              <el-select v-model="ruleForm.state" placeholder="请选择状态">
                <el-option label="成功" value="success"></el-option>
                <el-option label="驳回" value="reject"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="备注" prop="desc">
              <el-input
                type="textarea"
                v-model="ruleForm.desc"
                placeholder="请输入备注"
              ></el-input>
            </el-form-item>
          </el-form>
          <div class="btnBox">
            <button class="cancel" @click="cancelClick">取消</button>
            <button class="submit">确定</button>
          </div>
        </div>
      </div>
    </div>
    <!-- 头部开始 -->
    <div class="header">
      <div class="multiDo"><button @click="multiDo">批量操作</button></div>
      <div class="filterBox">
        <el-input placeholder="学员ID" v-model="user__id"></el-input>
        <template class="typeTemplate">
          <el-select v-model="form.region" placeholder="全部">
            <el-option label="全部" value="-1"></el-option>
            <el-option label="待处理" value="0"></el-option>
            <el-option label="已处理" value="1"></el-option>
            <el-option label="已驳回" value="2"></el-option>
          </el-select>
        </template>

        <button class="clear" @click="clearClick">清空</button>
        <button class="filter" @click="getDetailData">筛选</button>
      </div>
    </div>
    <!-- 头部结束 -->
    <!-- 表格数据开始 -->
    <div class="tableTempale">
      <template>
        <el-table
          :header-cell-style="{ background: '#f1f2f9', height: '70px' }"
          ref="multipleTable"
          :data="tabData"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column
            type="selection"
            width="55"
            :selectable="function (row) {
                return row.status === 0;
              }
            "
          >
          </el-table-column>
          <!-- id -->
          <el-table-column prop="id" label="ID" width="100"></el-table-column>
          <!-- 学员id -->
          <el-table-column prop="user_id" label="学员ID" width="120">
          </el-table-column>
          <!-- 学员 -->
          <el-table-column
            prop="user"
            label="学员"
            show-overflow-tooltip
            width="300"
          >
            <template slot-scope="scope">
              <img
                :src="users[tabData[scope.$index].user_id].avatar"
                alt=""
                style="width: 40px; height: 40px"
              />
              <span>
                {{ users[tabData[scope.$index].user_id].nick_name }}
              </span>
            </template>
          </el-table-column>
          <!-- 提现金额 -->
          <el-table-column
            prop="before_balance"
            label="提现金额"
            show-overflow-tooltip
            width="80"
          >
            <template slot-scope="scope">
              {{ scope.row.before_balance }}元
            </template>
          </el-table-column>
          <!-- 打款信息 -->
          <el-table-column
            prop="information"
            label="打款信息"
            show-overflow-tooltip
            width="300"
          >
            <template slot-scope="scope">
              渠道：{{ scope.row.channel }}<br />
              姓名：{{ scope.row.channel_name }}<br />
              账号：{{ scope.row.channel_account }}
            </template>
          </el-table-column>
          <!-- 状态 -->
          <el-table-column
            prop="status"
            label="状态"
            show-overflow-tooltip
            width="150"
          >
            <template slot-scope="scope">
              <div
                v-if="scope.row.status === 0"
                style="
                  display: inline-block;
                  padding: 4px 10px;
                  background: #ecf5ff;
                  color: #409eff;
                "
              >
                待处理
              </div>
              <div
                v-if="scope.row.status === 1"
                style="
                  display: inline-block;
                  padding: 4px 10px;
                  background: #f4f4f5;
                  color: #909399;
                  border-color: #e9e9eb;
                "
              >
                已处理
              </div>
              <div
                v-if="scope.row.status === 2"
                style="
                  display: inline-block;
                  padding: 4px 10px;
                  background: #fef0f0;
                  color: #f56c6c;
                "
              >
                已驳回
              </div>
            </template>
          </el-table-column>
          <!-- 备注 -->
          <el-table-column
            prop="remark"
            label="备注"
            show-overflow-tooltip
            width="300"
          >
          </el-table-column>
          <el-table-column
            prop="created_at"
            label="添加事件"
            show-overflow-tooltip
          >
          </el-table-column>
        </el-table>
      </template>
    </div>
    <!-- 分页 -->
    <div class="block">
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :total="blocks.orders.total"
      >
      </el-pagination>
    </div>
  </div>
</template>
    <!-- 表格数据结束 -->

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';

export default {
  // import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    // 这里存放数据
    return {
      bool: false,
      form: { region: "-1" },
      user__id: "",
      typeValue: "",
      typeOptions: [
        { value: "选项1", label: "全部" },
        { value: "选项2", label: "待处理" },
        { value: "选项3", label: "已处理" },
        { value: "选项4", label: "已驳回" },
      ],
      tableData: [
        {
          date: "2016-05-03",
          name: "王小虎",
          user: "上海市普陀区金沙江路 1518 弄",
          money: "200",
          information: "信息",
          status: "已处理",
          remark: "无",
        },
      ],
      multipleSelection: [],
      params: {
        status: -1,
        keywords: null,
        page: 1,
        size: 10,
        user_id: null,
      },
      tabData: [],
      blocks: { orders: { total: 0 } },
      users: {},
      dealLock: 0,
      currentPage: 1,
      ids: [],
      formState: "",
      formDesc: "",
      ruleForm: {
        state: "",
        desc: "",
      },
      rules: {
        state: [{ required: true, message: "请选择状态", trigger: "change" }],
        desc: [{ required: true, message: "请输入备注", trigger: "blur" }],
      },
      maskShow: false,
    };
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    handleSelectionChange: function (val) {
      this.ids = [];
      for (let i = 0; i < val.length; i++) {
        this.ids.push(val[i].id);
      }
      if (val.length != 0) {
        this.bool = true;
      } else if (val.length === 0) {
        this.ids = [];
      }
    },

    async getWithdrawData() {
      let res = await this.$request.get(
        "/member/inviteBalance/withdrawOrders",
        {
          params: this.params,
        }
      );

      this.tabData = res.data.orders.data;
      this.blocks = res.data;
      this.users = res.data.users;
    },
    getDetailData: function () {
      this.params.status = this.form.region;
      this.params.user_id = this.user__id;
      this.getWithdrawData();
    },
    clearClick: function () {
      this.user__id = "";
      this.form.region = -1;
      this.getWithdrawData();
    },
    handleCurrentChange: function (page) {
      this.params.page = page;
      this.getWithdrawData();
    },
    multiDo: function () {
      if (this.bool) {
        this.maskShow = true;
      } else {
        return this.$message.error("请选择需要操作的数据");
      }
    },
    cancelClick: function () {
      this.maskShow = false;
    },
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.getWithdrawData();
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='less'  scoped>
.container {
  width: 100%;
  height: auto;
  float: left;
  background-color: #fff;
  box-sizing: border-box;
  padding: 30px;
  border-radius: 15px;
  margin-bottom: 90px;
  box-shadow: 0 2px 4px 0 hsl(0deg 0% 40% / 5%);
  min-width: 1180px;
  .mask {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 900;
    .file-box {
      background-color: #fff;
      box-shadow: 0 1px 3px rgb(0 0 0 / 30%);
      box-sizing: border-box;
      width: 50%;
      position: fixed;
      border-radius: 8px;
      height: 345px;
      top: 28%;
      left: 25%;
      .box-title {
        line-height: 24px;
        font-size: 18px;
        color: #303133;
        padding: 20px 20px 10px;
      }

      .form {
        padding: 30px 20px;
        color: #606266;
        font-size: 14px;
        .el-form.demo-ruleForm {
          padding: 0 30px;
          .el-form-item {
            .el-textarea {
              width: 400px;
              min-height: 33.6667px;
            }
          }
        }

        .btnBox {
          position: absolute;
          right: 10px;
          bottom: 10px;
          .cancel {
            padding: 8px 20px;
            border: 1px solid #dcdfe6;
            background: #fff;
            cursor: pointer;
            border-radius: 4px;
            box-sizing: border-box;
            margin-right: 10px;
            &:hover {
              background-color: #ecf5ff;
              color: #409eff;
            }
          }

          .submit {
            padding: 8px 20px;
            border: 1px solid #dcdfe6;
            background-color: #409eff;
            cursor: pointer;
            border-radius: 4px;
            box-sizing: border-box;
            margin-right: 10px;
            color: #fff;
            &:hover {
              background-color: #66b1ff;
            }
          }
        }
      }
    }
  }
  .header {
    margin-bottom: 30px;
    display: flex;
    justify-content: space-between;

    .multiDo {
      button {
        color: #fff;
        background-color: #409eff;
        border: 0;
        padding: 10px 20px;
        font-size: 14px;
        border-radius: 4px;
        box-sizing: border-box;
        cursor: pointer;
      }
    }

    .filterBox {
      display: flex;
      .el-input {
        width: 150px;
        font-size: 14px;
        margin-right: 10px;
      }

      /deep/.el-input__inner {
        width: 150px;
        font-size: 14px;
        margin-right: 10px;
      }
      /deep/.el-input__suffix {
        margin-right: 10px;
      }
      .clear {
        font-weight: 400;
        cursor: pointer;
        box-sizing: border-box;
        border: 1px solid #ccc;
        border-radius: 4px;
        font-size: 14px;
        background-color: #fff;
        padding: 7px 20px;
        color: #212121;
        margin-right: 10px;
        &:hover {
          background-color: #ecf5ff;
          color: #409eff;
        }
      }
      .filter {
        font-weight: 400;
        cursor: pointer;
        box-sizing: border-box;
        border: 1px solid #ccc;
        border-radius: 4px;
        font-size: 14px;
        background-color: #409eff;
        padding: 7px 20px;
        color: #fff;
        margin-right: 10px;
        border: 0;
        &:hover {
          background-color: #66b1ff;
        }
      }
    }
  }
  .block {
    margin-top: 30px;

    .el-pagination {
      padding: 0 500px;
    }
  }
}
</style>
